<template>
  <div class="mine-notes">
    <img
      @click="$router.push(`/article_detail?articleId=${items.articleDo.id}`)"
      class="fengmian"
      :src="`http://101.42.154.211:8080/qyj` + items.articleDo.masterImg"
      alt=""
    />
    <p style="padding: 0 5px">{{ items.articleDo.title }}</p>
    <div class="bottom">
      <img :src="imgBase + avatarUrl" alt="" />
      <span>Rocky</span>
      <div class="footer_component">
        <van-icon
          size="1em"
          name="like-o"
          :class="{ liked: liked }"
          @click="if_like()"
        /><span>{{ items.articleDo.goodCont }}</span>
        <van-icon
          :class="{ stared: stared }"
          @click="if_star()"
          size="1em"
          name="star-o"
        /><span>{{ items.articleDo.collCont }}</span>
        <!-- <van-icon size="1em" name="comment-o" /><span>66</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["imgBase", "avatarUrl"]),
  },
  props: ["items"],
  data() {
    return {
      liked: false,
      like_count: 20,
      stared: false,
      star_count: 55,
    };
  },
  methods: {
    if_like() {
      if (!this.liked) {
        this.like_count++;
      } else {
        this.like_count--;
      }
      this.liked = !this.liked;
    },
    if_star() {
      if (!this.stared) {
        this.star_count++;
      } else {
        this.star_count--;
      }
      this.stared = !this.stared;
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
}
.mine-notes {
  box-sizing: border-box;
  padding: 5px;
  margin: 5px 0;
  width: 48vmin;
  background-color: white;
  border: 1px solid #eee;
  > img {
    height: 30vmax;
  }
  p {
    margin: 10px 0;
    font-size: 20px;
  }
  > .bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    > .footer_component {
      .liked {
        color: red;
      }
      .stared {
        color: red;
      }
    }

    > img {
      width: 7.69vmin;
      height: 7.69vmin;
      border-radius: 50%;
    }
    > span {
      flex: 1;
    }
  }
}
</style>
